import React from 'react';
import { useTemplateContext } from '@/contexts/TemplateContext';

const TemplateSelector: React.FC = () => {
  const { templates, selectedTemplate, setSelectedTemplate } = useTemplateContext();
  
  const handleTemplateChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const templateId = e.target.value;
    const template = templates.find(t => t.id === templateId) || null;
    setSelectedTemplate(template);
  };
  
  return (
    <div className="bg-white rounded-lg shadow-md p-4 mb-6">
      <h3 className="text-lg font-semibold mb-3 text-gray-800">1. 选择文书模板</h3>
      <select
        className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        value={selectedTemplate?.id || ''}
        onChange={handleTemplateChange}
      >
        <option value="" disabled>请选择模板</option>
        {templates.map(template => (
          <option key={template.id} value={template.id}>
            {template.title}
          </option>
        ))}
      </select>
    </div>
  );
};

export default TemplateSelector;